<template>
	<view>
		<view class="head">
			<view class=""></view>
			<view class="">购物车</view>
			<view class="headRight">编辑</view>
		</view>
		<view class="shop">
			<view class="">商品清单</view>
			<view class="shopRight blue">
				全部展开
				<image src="../../../static/images/arrow_down.png" mode=""></image>
			</view>
		</view>
		<view class="apple">
			<view class="appleLeft"><image :src="appleImage" mode="" @click="changeAppleft"></image></view>
			<view class="appleCenter"><image src="../../../static/images/201916541220.jpg" mode=""></image></view>
			<view class="appleRight">
				<view class="">苹果</view>
				<view class="appleRightBott">总数量：4（¥188.00）</view>
			</view>
			<view class="appleUnfold" @click="ShowSize">
			{{unfold}}
				<image :src="unfoldImage" mode=""></image>
			</view>
		</view>
		<view class="size" v-show="ShowUnfold">
			<image :src="sizeImage" mode="" @click="changeSize"></image>
			<view class="">
				红色/大码
			</view>
			<view class="price">
				¥3.00
			</view>
			<view class="number">
				<stepper style="float: right;" size="small" :min="0" :max="20" @change="changeNum"></stepper>
			</view>
			</view>
			<view class="all">
				<view class="allwill">
					<image :src="allImage" mode="" @click="changeall"></image>
					<view class="">
						全选
					</view>
				</view>
				<view class="total">
					<view class="totalTop">
					（共3种，总数7）
					</view>
					<view class="totalBot">
						合计:<text>¥365</text>
					</view>
				</view>
				<view class="but">
					立即下单
				</view>
			</view>
			<view class="tarbar">
				<view class="one">
					<image src="../../../static/shopImage/bbbb.png" mode=""></image>
					<view class="txt">店铺</view>
				</view>
				<view class="one">
					<image src="../../../static/shopImage/2.png" mode=""></image>
					<view class="txt">商品</view>
				</view>
				<view class="one">
					<image src="../../../static/shopImage/dddddddddd.png" mode=""></image>
					<view class="text">购物车</view>
					<view class="dian" v-show="dian">1</view>
				</view>
				<view class="one">
					<image src="../../../static/shopImage/4.png" mode=""></image>
					<view class="txt">我的</view>
				</view>
			</view>
	</view>
</template>

<script>
	import stepper from '../../../components/stepper/stepper.vue';
export default {
	data() {
		return {
			type: 0,
			size: 0,
			all:0,
			unfold:'展开',
				dian: true,
			unfoldImage:'../../../static/images/arrow_down.png',//arrow_ondown.png
			appleImage: '../../../static/shopImage/kong.png',
			sizeImage: '../../../static/shopImage/kong.png',
			allImage:'../../../static/shopImage/kong.png',
			ShowUnfold:false,
		};
	},
	methods: {
		changeNum(e) {
			console.log(e);
		
		},
		changeAppleft() {
			if (this.type == 0) {
				(this.appleImage = '../../../static/shopImage/gou.png'), (this.type = this.type + 1);
			} else {
				(this.appleImage = '../../../static/shopImage/kong.png'), (this.type = 0);
			}
		},
		changeSize() {
			if (this.size == 0) {
				(this.sizeImage = '../../../static/shopImage/gou.png'), (this.size = this.size + 1);
			} else {
				(this.sizeImage = '../../../static/shopImage/kong.png'), (this.size = 0);
			}
		},
		ShowSize(){
			if(this.ShowUnfold){
					this.ShowUnfold=false,
					this.unfoldImage='../../../static/images/arrow_down.png',
					this.unfold='展开';
			} else{ 
			
				this.unfold='收起';
				this.unfoldImage='../../../static/images/arrow_ondown.png',
				this.ShowUnfold=true
			}
		},
		changeall(){
			if (this.all == 0) {
				(this.allImage = '../../../static/shopImage/gou.png'), (this.all = this.all + 1);
			} else {
				(this.allImage = '../../../static/shopImage/kong.png'), (this.all = 0);
			}
		}
	},
	components: {
		stepper
	}
};
</script>

<style lang="scss">
.head {
	height: 88rpx;
	line-height: 88rpx;
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	background-color: #249af6;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	.headRight {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}
}
.shop {
	height: 110rpx;
	line-height: 110rpx;
	box-sizing: border-box;
	border-bottom: 2rpx solid #cccccc;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	display: flex;
	justify-content: space-between;
	padding: 0 30rpx;
	.shopRight {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
	}
	image {
		width: 17rpx;
		height: 10rpx;
		margin-left: 21rpx;
	}
}
.blue {
	color: rgba(36, 154, 246, 1);
}
.apple {
	height: 205rpx;
	padding: 36rpx 30rpx;
	box-sizing: border-box;
	border-bottom: 2rpx solid #eeeeee;
	position: relative;
	display: flex;
	.appleLeft {
		image {
			height: 36rpx;
			width: 36rpx;
			margin-top: 50rpx;
		}
	}
	.appleCenter {
		image {
			width: 130rpx;
			height: 130rpx;
			margin-left: 22rpx;
		}
	}
	.appleRight {
		margin-left: 27rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		.appleRightBott {
			margin-top: 50rpx;
		}
	}
	.appleUnfold {
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(36, 154, 246, 1);
		image {
			width: 17rpx;
			height: 10rpx;
			vertical-align: middle;
			margin-left: 20rpx;
		}
	}
}
.size {
	width: 100%;
	height: 106rpx;
	line-height:106rpx;
	background-color: #eeeeee;
	font-size:30rpx;
	font-family:PingFang SC;
	font-weight:500;
	color:rgba(102,102,102,1);
	display: flex;
	image {
		margin: 39rpx 0;
		margin-left: 89rpx;
		margin-right: 33rpx;
		width: 36rpx;
		height: 36rpx;
	}
	.price{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(246,68,68,1);
		margin-left: 99rpx;
	}
	.number{
		margin-top: 32rpx;
		margin-left: 60rpx;
	}
}
.all{
	position: relative;
	position: fixed;
	bottom: 98rpx;
	width: 100%;
	height: 98rpx;
	border:2rpx solid #DDDDDD;
	display: flex;

	.allwill{
			line-height: 98rpx;
			display: flex;
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(102,102,102,1);
		image{
			width: 36rpx;
			height: 36rpx;
			margin: 31rpx;
		}
	}
	.total{
		margin-left: 72rpx;
		.totalTop{
			margin-top: 14rpx;
			font-size:22rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(102,102,102,1);
		}
		.totalBot{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(102,102,102,1);
			margin-top: 5rpx;
			margin-left:12rpx;
			text{
				margin-left: 14rpx;
				font-size:36rpx;
				font-family:PingFang SC;
				font-weight:500;
				color:rgba(246,68,68,1);
			}
		}
	}
	.but{
		position: absolute;
		right: 0;
		width: 226rpx;
		height: 100%;
		background-color: #F93C45;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		line-height: 98rpx;
		text-align: center;
	}
}
.tarbar {
	height: 98rpx;
	width: 100%;
	position: fixed;
	bottom: 0;
	display: flex;
	justify-content: space-around;
	background-color: #ffffff;
	.one {
		position: relative;
		image {
			height: 44rpx;
			width: 44rpx;
			margin-top: 11rpx;
		}
		.dian {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			font-size: 22rpx;
			position: absolute;
			color: #ffffff;
			line-height: 30rpx;
			text-align: center;
			top: 0;
			left: 24rpx;
			background-color: #f93c45;
		}
	}
	.text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(247, 110, 117, 1);
	}
	.txt {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
	}
}
</style>
